import { LoginApi,LoginServer,Iuser } from '../api';
import { ReactPropTypes, useState } from 'react';
import {useDispatch,useSelector,useStore,connect,ProviderProps} from 'react-redux'
import store, { RootState,decrement,increment,login} from '../store';
import { Action,AnyAction } from 'redux';
import { useNavigate } from 'react-router-dom';
interface ActionType {
  type:string,payload?:any
}
interface Iprops  {
  decrement:()=>ActionType
  increment:(arg:number)=>ActionType 
  counter?:any
  login?:any
  
}
function Logins(props:Iprops) {
  const num = useSelector((state:RootState)=>state.counter.num)
  const dispatch  = useDispatch();
  const stores= useStore() as typeof store
  const state = stores.getState()
  const [user,setUser]  = useState({name:"",password:""})
  const navigate = useNavigate()
  /*
  // const LoginHd = ()=>{
  //   LoginApi(user)
  //   .then(res=>{
  //     if(res.code===200){
  //       console.log(res,"res")
  //     }
  //   })
  // }
  */
  const LoginHd=()=>{
    LoginServer(user)
    .then(res=>{
      console.log(res.data.code)
    })
  }
  return ( <div>
    <h2>登录</h2>
    用户名：<input value={user.name} onChange={e=>setUser({...user,name:e.target.value})}/> <br/>
    密  码：<input  value={user.password} onChange={e=>setUser({...user,password:e.target.value})}/><br/>
    <button onClick={LoginHd}>登录</button>
    <button onClick={()=>props.login(user, navigate)}>登录</button>
    <p>{num}</p>
    <button onClick={()=>dispatch(decrement())}>动作</button>
    <button onClick={()=>dispatch({type:"counter/increment",payload:10})}>动作</button>
    <button onClick={()=>dispatch(increment(10))}>动作</button>
    <p>{JSON.stringify(state)}</p>
    <hr/>
    <p> {props.counter.num}</p>
    <button onClick={()=>props.increment(20)}>add</button>
    <button onClick={()=>props.decrement()}>de</button>
  </div> );
}

export default connect(state=>state,{decrement,increment,login})(Logins);